// import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>我是副标题</span></span></h1>

// 1.将时间现实在页面上
function clock() { 
  let time = new Date().toLocaleString();
  let timeElemnt = (
    <div>
      <h2>当前时间是：{time}</h2>
    </div>
  );
  ReactDOM.render(
    timeElemnt,
    root
  );
 }
// setInterval(clock,1000);


// 2.react的函数式组件
function Clocks (props) {
  return (
    <div>
      <h3>函数式组件--当前时间是：{props.date.toLocaleTimeString()}</h3>
      <h5>函数式组件父传子通过props</h5>
    </div>
  )
}

function  run() { 
  ReactDOM.render(
    <Clocks date={new Date()}/>,
    document.getElementById("root")
  )
 }
 setInterval(run,1000);


ReactDOM.render(
  h1,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
